<template>
  <div class="box-padding">
    <div v-show="!showTempList && !showUnitList">
      <Header class="header-cont main__title--top">{{$route.params.name}}</Header>
      <Row>
        <Col span="10">
        <div class="col">
          <label :class="{star: !isDisabled}">所属机构</label>
          <Input v-model="data.parentName"
                 class="input-1"
                 :disabled='true' />
        </div>
        </Col>
        <Col span="10">
        <div class="col">
          <label :class="{star: !isDisabled}">机构编号</label>
          <Input v-model="data.code"
                 placeholder="请输入机构编号"
                 class="input-1"
                 :disabled="this.$route.params.type != 'add'"
                 maxlength="30" />
        </div>
        </Col>
      </Row>
      <Row>
        <Col span="10">
        <div class="col">
          <label :class="{star: !isDisabled}">机构名称</label>
          <Input v-model="data.name"
                 class="input-1"
                 placeholder="请输入机构名称"
                 :disabled='isDisabled'
                 maxlength="60" />
        </div>
        </Col>
        <Col span="10">
        <div class="col">
          <label :class="{star: !isDisabled}">负责人</label>
          <Input v-model="data.contact"
                 placeholder="请输入负责人名称"
                 class="input-1"
                 :disabled='isDisabled'
                 maxlength="20" />
        </div>
        </Col>
      </Row>
      <Row>
        <Col span="10">
        <div class="col">
          <label :class="{star: !isDisabled}">状态</label>
          <Select v-model="data.dictWorkAreaState"
                  :disabled='isDisabled'
                  class="input-1">
            <Option v-for="(item,index) in typeList"
                    :key="index"
                    :value="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        </Col>
        <Col span="10">
        <div class="col">
          <label :class="{star: !isDisabled}">开工时间</label>
          <DatePicker type="date"
                      placeholder="Select date"
                      class="input-1"
                      v-model="data.startTime"
                      :disabled='isDisabled'></DatePicker>
        </div>
        </Col>
      </Row>

      <div class="col">
        <label>概况说明</label>
        <Input v-model="data.description"
               maxlength="500"
               type="textarea"
               placeholder="请输入概况说明"
               :rows="4"
               style="width: calc(50% + 190px);height:120px"
               :disabled='isDisabled' />
      </div>
      <div class="col"
           style="background-color: #aac6e9">
        <p>工作范围</p>
        <Icon type="ios-add-circle-outline"
              style="float:right;margin-right: -5px;
    margin-top: 5px;color:#2d8cf0"
              @click="getList()"
              size="24"
              v-show="!isDisabled" />
      </div>
      <Tabs :value="value"
            @on-click="clickTab">
        <TabPane label="单位工程"
                 name="POST_TYPE_1">
          <Table border
                 :columns="columns1"
                 :data="data.unitEngineeringList"></Table>
        </TabPane>
        <TabPane label="临建设施"
                 name="POST_TYPE_2">
          <Table border
                 :columns="columns2"
                 :data="data.overlayFacilitiesList"></Table>
        </TabPane>
      </Tabs>
      <div class="foot-modal"
           v-show='!isDisabled'>
        <Row>
          <Col span="2"
               offset="8">
          <Button type="primary"
                  @click="save">保存</Button>
          </Col>
          <Col span="2">
          <Button @click='closeTab'>取消</Button>
          </Col>
        </Row>
      </div>

    </div>
    <tempList :id='this.$route.params.linkedId'
              v-show="showTempList && !showUnitList"
              @postTemp='getTmp'
              ref="unitref"></tempList>
    <unitList :id='this.$route.params.linkedId'
              v-show="!showTempList && showUnitList"
              @postUnit='getUnit'
              :list='this.data.overlayFacilitiesList'></unitList>
  </div>
</template>
<script>
import { mapMutations, mapState, mapActions } from 'vuex'
import tempList from './tempAdd'
import unitList from './unitAdd'
export default {
  components: { tempList, unitList },
  data() {
    return {
      typeList: [],
      proList: [],
      data: {}, //详情数据
      showTempList: false,
      showUnitList: false,
      value: 'POST_TYPE_1',
      columns1: [
        {
          title: '序号',
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + 1)
          }
        },
        {
          title: '单位工程名称',
          align: 'center',
          key: 'name'
        },
        {
          title: '专业类型',
          align: 'center',
          key: 'wbsName'
        },
        {
          title: '风险等级',
          align: 'center',
          key: 'dictRiskGradeName'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              !this.isDisabled
                ? h('Icon', {
                    props: {
                      type: 'ios-remove-circle-outline',
                      size: '20'
                    },
                    style: {
                      marginRight: '5px',
                      color: '#2d8cf0'
                    },
                    on: {
                      click: () => {
                        this.deleteList1(params.index)
                      }
                    }
                  })
                : ''
            ])
          }
        }
      ],
      columns2: [
        {
          title: '序号',
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + 1)
          }
        },
        {
          title: '临建设施名称',
          align: 'center',
          key: 'name'
        },
        {
          title: '设施类型',
          align: 'center',
          key: 'distOverlayFacilitiesName'
        },

        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              !this.isDisabled
                ? h('Icon', {
                    props: {
                      type: 'ios-remove-circle-outline',
                      size: '20'
                    },
                    style: {
                      marginRight: '5px',
                      color: '#2d8cf0'
                    },
                    on: {
                      click: () => {
                        this.deleteList2(params.index)
                      }
                    }
                  })
                : ''
            ])
          }
        }
      ],
      isDisabled: false
      // unitEngineeringList: [], //单位工程列表
      // overlayFacilitiesList: [] //临建设施列表,
    }
  },
  methods: {
    ...mapActions(['getNode']),
    ...mapMutations(['closeTag']),
    closeTab() {
      this.closeTag({
        name: this.$route.name,
        params: this.$route.params
      })
    },
    getTypeList() {
      //获取状态列表
      this.$api.user
        .dictTypeCode('WORK_AREA_STATE')
        .then(res => {
          if (res.code === 200) {
            this.typeList = res.data
          } else {
            this.$Message.warning(res.message)
          }
        })
        .catch(() => {
          this.$Message.warning('获取类型失败')
        })
    },
    getProList(type, id) {
      //机构编号
      this.$api.ProjectTeam.findCode(type, id, 'work')
        .then(res => {
          if (res.code === 200) {
            this.data = {
              enterpriseId: this.$route.params.enterpriseId,
              type: this.$route.params.typeObj, //树的类型
              enterpriseName: this.$route.params.parentName,
              objectId: this.$route.params.objectId,
              code: res.data
            }
          } else {
            this.$Message.warning(res.message)
          }
        })
        .catch(() => {
          this.$Message.warning('生成编号失败')
        })
    },
    clickTab(value) {
      this.value = value
    },
    save() {
      let params = this.$route.params
      if (!this.data.name) {
        this.$Message.warning('请填写机构名称')
      } else if (!this.data.code) {
        this.$Message.warning('请填写机构编号')
      } else {
        if (this.$route.params.type == 'add') {
          let reqData = {
            parentId: this.$route.params.enterpriseId,
            type: this.data.type,
            contact: this.data.contact,
            parentName: this.data.parentName,
            code: this.data.code,
            dictWorkAreaState: this.data.dictWorkAreaState,
            name: this.data.name,
            startTime: this.data.startTime,
            description: this.data.description,
            unitEngineeringList: this.data.unitEngineeringList,
            overlayFacilitiesList: this.data.overlayFacilitiesList
          }
          this.$api.ProjectTeam.workAdd(reqData).then(res => {
            if (res.code === 200) {
              this.$Message.success(res.message)
              res.data.mode = 'add'
              res.data.children = []
              this.getNode(res.data)
              this.$router.push({
                name: 'project-team'
              })
              this.closeTag({
                name: 'project-team-work-add',
                params: params
              })
            } else {
              this.$Message.warning(res.message)
            }
          })
        } else {
          let reqData = {
            id: this.data.id,
            parentId: this.$route.params.enterpriseId,
            type: this.data.type,
            parentName: this.data.parentName,
            contact: this.data.contact,
            code: this.data.code,
            dictWorkAreaState: this.data.dictWorkAreaState,
            name: this.data.name,
            startTime: this.data.startTime,
            description: this.data.description,
            unitEngineeringList: this.data.unitEngineeringList,
            overlayFacilitiesList: this.data.overlayFacilitiesList
          }
          this.$api.ProjectTeam.workEdit(reqData).then(res => {
            if (res.code === 200) {
              this.$Message.success(res.message)
              res.data.mode = 'edit'
              res.data.children = []
              this.getNode(res.data)
              this.$router.push({
                name: 'project-team'
              })
              this.closeTag({
                name: 'project-team-work-edit',
                params: params
              })
            } else {
              this.$Message.warning(res.message)
            }
          })
        }
      }
    },
    // getMsg(data) {
    //   //从子组件获取项目信息
    //   this.data.projectId = data.projectId
    //   this.data.projectName = data.projectName
    //   this.isModal = false
    // },
    getList() {
      //下面两个列表弹窗
      if (this.value == 'POST_TYPE_2') {
        this.showTempList = true
        this.showUnitList = false
        this.$refs.unitref.tempList = []
        this.$refs.unitref.tempObj = {}
        this.$refs.unitref.tempIdList = []
        this.$refs.unitref.getList()
        this.$refs.unitref.getTypeList()
      } else {
        this.showTempList = false
        this.showUnitList = true
      }
    },
    getTmp(data) {
      //从子组件获取临建
      if (data) {
        this.data.overlayFacilitiesList = data
      }
      this.showTempList = false
      this.showUnitList = false
    },
    getUnit(data) {
      //从子组件获取单位
      if (data) {
        this.data.unitEngineeringList = data
      }
      this.showTempList = false
      this.showUnitList = false
    },
    getDetail(id) {
      if (this.$route.params.name === '日志详情') {
        this.$api.operationLog.getOperationLogDetail(id).then(res => {
          if (res.code === 200) {
            this.data = JSON.parse(res.data.params)
            this.data.startTime = this.$time(
              new Date(this.data.startTime),
              'yyyy-MM-dd'
            )
          } else {
            this.$Message.error(res.message)
          }
        })
      } else {
        this.$api.ProjectTeam.workDetail(id).then(res => {
          if (res.code == 200) {
            this.data = res.data
          }
        })
      }
    },
    deleteList1(index) {
      this.data.unitEngineeringList.splice(index, 1)
    },
    deleteList2(index) {
      this.data.overlayFacilitiesList.splice(index, 1)
    }
  },
  mounted() {
    this.getTypeList()

    this.isDisabled = this.$route.params.type == 'details' ? true : false
    if (this.$route.params.type != 'add') {
      this.getDetail(this.$route.params.objectId)
    } else {
      this.getProList(
        this.$route.params.typeObj,
        this.$route.params.enterpriseId
      ) //获取code码
    }
    this.showTempList = false
    this.showUnitList = false
    this.data.unitEngineeringList = []
    this.data.overlayFacilitiesList = []
  }
}
</script>

<style scoped lang="scss">
.col {
  padding: 5px;
  .col-item {
    display: inline-block;
    margin-right: 10px;
  }
  label {
    display: block;
  }
  .input-1 {
    width: 300px;
  }
  .input-2 {
    width: 150px;
  }
}
.asterisk:before {
  content: '*';
}
.header-modal {
  padding: 30px 10px;
  font-size: 16px;
  font-weight: bold;
}
.foot-modal {
  height: 100px;
  width: 100%;
  text-align: center;
  position: fix;
  bottom: 20px;
  margin-top: 30px;
}
.star:before {
  content: '*';
  display: inline-block;
  margin-right: 4px;
  line-height: 1;
  font-family: SimSun;
  font-size: 14px;
  color: #ed4014;
}
</style>
